<template>
  <div>
    <v-header></v-header>
    <div>
      <div class="ris_cont">
        <!--<div class="ris_cont_headNav">字典页面&gt;科室维护</div>-->
        <div class="ris_cont_headHint">检查部位组设置<div class="ris_cont_headHint_add" @click="add_ks()">+</div></div>
        <div class="ris_cont_dept">
          <table class="ris_cont_dept_tab5">
            <tr>
              <th>编号</th>
              <th>检查部位组</th>
              <th>拼音码</th>
              <th>备注</th>
              <th>是否使用</th>
              <th>排序号</th>
              <th>操作</th>
            </tr>
            <tr v-for="(item,i) in Partgroups">
              <td>{{item.code}}</td>
              <td>{{item.name}}</td>
              <td>{{item.pycode}}</td>
              <td>{{item.memo}}</td>
              <td>{{item.isuse==1?"是":"否"}}</td>
              <td>{{item.sortnum}}</td>
              <td>
                <button class="ris_cont_dept_tab_change button color_white bg_deepBlue" @click="add_ks(i)">修改</button>
                <button class="ris_cont_dept_tab_delete button  bg_yellow color_white" @click="dele(item.code)">删除</button>
              </td>
            </tr>
          </table>
        </div>
      </div>

      <!--新增或修改模态-->
      <div class="ris_dept_modal" v-show="ks_motai">
        <div>
          <p class="ris_dept_modal_head">检查部位组设置<span class="ris_dept_modal_btn_close" @click="add_ks()">X</span></p>
          <table class="ris_dept_modal_tab">
            <tr>
              <td>检查部位组</td>
              <td><input type="text" v-model="obj.name" @input="change(obj.name)"></td>
            </tr>
            <tr>
              <td>拼音码</td>
              <td><input type="text" v-model="obj.pycode"></td>
            </tr>
            <tr>
              <td>排序号</td>
              <td><input type="number" v-model="obj.sortnum"></td>
            </tr>
            <tr>
              <td>是否使用</td>
              <td>
                <select v-model="obj.isuse">
                  <option :value="1">是</option>
                  <option :value="0">否</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>备注</td>
              <td><input type="text" v-model="obj.memo"></td>
            </tr>
          </table>
          <div class="ris_dept_modal_btn">
            <button @click="queding()">确认</button>
            <button class="ris_dept_modal_btn_close" @click="add_ks()">取消</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Header from '@/components/Header/Header';
//  import HeaderComponent from './components/header.vue'
//  import OtherComponent from './components/other.vue'

export default {
  components: {
    'v-header': Header
  },
data() {
  return {
    ks_motai:false,
   msg: 'hello vue',
   //全部收费类型
    Partgroups:[],
    //一条收费类型信息
    obj:{"pycode":""},
     }
  },
  created(){
    var _this=this;
    //  window.localStorage.url="http://10.0.2.23:8090";
    this.$http.get(window.localStorage.url+"/partgroup/findPartgroupall")
      .then(function (res) {
        if(res.data.status=='SUCCESS') {
          this.Partgroups=res.data.data;
        }
      });

  },
  methods:{

    //公共弹窗
    addModal:function (text,time) {
      $pg.popup({
        text:text,//显示的文本
        btnClass:'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
        btnBgColor:'#4f56a3',//按钮的颜色
        btnToggle:{
          btnDetermine:true,//确定按钮是否显示
          btnCancel:false,//取消按钮是否显示
        },
        timeOut:time,
      });
    },



    //添加修改模态的显示与不显示
    add_ks(i){
      this.ks_motai=!this.ks_motai;
      if(this.ks_motai){
        if(i!=null){
        $.extend(true,this.obj,this.Partgroups[i]);
          return;
        }
      this.obj={"pycode":""};
      }
    },
    //添加和修改的确定
    queding(){
      var _this=this;
      if(!this.obj.name){
        $pg.popup({
          text: "检查部位组不能为空",//显示的文本
          btnClass: 'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
          btnBgColor: '#4f56a3',//按钮的颜色
          btnToggle:{
            btnDetermine:true,//确定按钮是否显示
            btnCancel:false,//取消按钮是否显示
          }
        });
        return;
      }

      if(this.obj.code){
        console.log("修改");
        this.$http.post(window.localStorage.url+"/partgroup/updatePartgroup",this.obj)
          .then(function (res) {
            if(res.data.status=='SUCCESS') {
              _this.$http.get(window.localStorage.url+"/partgroup/findPartgroupall")
                .then(function (res) {
                  if(res.data.status=='SUCCESS') {
                    _this.Partgroups=res.data.data;
                    _this.ks_motai=!_this.ks_motai;
                  }
                });
            }else if(res.data.status=="repeat"){
              $pg.popup({
                text: res.data.msg,//显示的文本
                btnClass: 'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
                btnBgColor: '#4f56a3',//按钮的颜色
                btnToggle:{
                  btnDetermine:true,//确定按钮是否显示
                  btnCancel:false,//取消按钮是否显示
                }
              });
            }
          });
      }else{
        console.log("添加");

        this.$http.post(window.localStorage.url+"/partgroup/addPartgroup",this.obj)
          .then(function (res) {
            if(res.data.status=='SUCCESS') {
              _this.$http.get(window.localStorage.url+"/partgroup/findPartgroupall")
                .then(function (res) {
                  if(res.data.status=='SUCCESS') {
                    _this.Partgroups=res.data.data;
                    _this.ks_motai=!_this.ks_motai;
                  }
                });
            }else if(res.data.status=="repeat"){
              $pg.popup({
                text: res.data.msg,//显示的文本
                btnClass: 'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
                btnBgColor: '#4f56a3',//按钮的颜色
                btnToggle:{
                  btnDetermine:true,//确定按钮是否显示
                  btnCancel:false,//取消按钮是否显示
                }
              });
            }
          });
      }
    },
    //删除
    dele(code){
      var _this=this;
      console.log(code);
      $pg.popup({
        text:"确定删除吗？",//显示的文本
        btnClass:'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
        btnBgColor:'#4f56a3',//按钮的颜色
        determine:function(){
          _this.$http.get(window.localStorage.url+"/partgroup/deletePartgroup?code="+code)
            .then(function (res) {
              if(res.data.status=='SUCCESS') {

                _this.addModal(res.data.data,1);//公共弹窗

                _this.$http.get(window.localStorage.url+"/partgroup/findPartgroupall")
                  .then(function (res) {
                    if(res.data.status=='SUCCESS') {
                      _this.Partgroups=res.data.data;
                    }
                  });
              }else{

                _this.addModal(res.data.data,true);//公共弹窗
              }
            });

        },//点击确定执行的方法
      });

    },
    change(name){
      var _this=this;
      _this.$http.get(window.localStorage.url+"/pytool/getPyCode?name="+name)
        .then(function (res) {
          if(res.data.status=='SUCCESS'&&res.data.data!=null&&res.data.data!="undefined") {
              _this.obj.pycode=res.data.data;
          }
        });

    },
    wei(code,name,type){
      window.localStorage.setItem("eqpfeecode",code);
      window.localStorage.setItem("eqpfeename",name);
      window.localStorage.setItem("eqpfeetype",type);
      this.$router.push({name: 'BaseFeeItemEqu'});
    }
  },
//  components: {'other-component': OtherComponent, HeaderComponent,}add_ks()
}
</script>
<style scoped>
  /*body {*/
  /*background-color: #ff0000;*/
/*}*/
  .ris_cont_headHint {
    height: 40px;
    background-color: #999;
    color: #f1f1f1;
    line-height: 40px;
    padding-left: 30px;
    box-sizing: border-box;
  }


/*新增按钮*/
.ris_cont_headHint_add{
  width: 70px;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  float: right;
  background-color: #666;
  color: #fff;
  cursor: pointer;
}
/*内容区*/
.ris_cont_dept{
  width: 95%;
  margin: 0 auto;
  background-color: #fff;
}
.ris_cont_dept_tab5{
  width: 100%;
  line-height: 40px;
  font-size: 12px;
  text-align: center;
  margin-top: 15px;
}
.ris_cont_dept_tab5 tr td,.ris_cont_dept_tab tr th{
  border: 1px solid #ddd;
}
.ris_cont_dept_tab5 tr th{
  background-color: #666;
  color: #fff;
}
.ris_cont_dept_tab5 tr td:last-child{
  width: 20%;
}
.ris_cont_dept_tab5 tr td:last-child button{
  width: 24%;
  height: 26px;
  margin: 0 3%;
  /*background-color: #215c84;*/
 background: transparent;
 border: 0;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
/*.ris_cont_dept_tab5 tr td:last-child button:nth-child(1){*/
  /*color: #57e103;*/
/*}*/
/*.ris_cont_dept_tab5 tr td:last-child button:nth-child(2){*/
  /*color: #0000ff;*/
/*}*/
/*.ris_cont_dept_tab5 tr td:last-child button:last-child{*/
  /*color: #FF3C2B;*/
/*}*/
.ris_cont_dept_tab5 tr td:last-child button:hover{
  /*background-color: #1a4161;*/
}


/*点击删除弹出的模态框*/
.ris_dept_delete{
  position: fixed;
  z-index: 800;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(66,66,66,.2);
  display: none;
}
.ris_dept_delete>div{
  position: absolute;
  width: 260px;
  height: 150px;
  left: 50%;
  top: 50%;
  margin-left: -130px;
  margin-top: -75px;
  border: 1px solid #000;
  border-radius: 10px;
  background-color: #fff;
}
.ris_dept_delete_head{
  height: 30px;
  text-align: right;
  background-color: #999;
  border-radius: 10px 10px 0 0 ;
}
.ris_dept_delete_head span{
  display: inline-block;
  padding: 0 20px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}
/*文字*/
.ris_dept_delete_text{
  line-height: 70px;
  padding-left: 20px;
  font-size: 14px;
  color: #666;
}
/*按钮*/
.ris_dept_delete_btn{
  text-align: right;
}
.ris_dept_delete_btn button{
  width: 70px;
  background-color: #215c84;
  color: #fff;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  height: 30px;
  margin-right: 20px;
}
.ris_dept_delete_btn button:hover{
  background-color: #1a4161;
}

  .ris_cont {
    width: 95%;
    min-width: 1300px;
    /* border: 1px solid red; */
    margin: 50px auto 40px;
  }

/*新增或修改的模态*/
.ris_dept_modal{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(66,66,66,.2);
  z-index: 2;

}
.ris_dept_modal>div{
  position: absolute;
  width: 400px;
  height: 460px;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -230px;
  border: 1px solid #000;
  background: #f7f7f7;
  border-radius: 10px;
}
/*模态头部*/
.ris_dept_modal_head{
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  border-bottom: 1px solid #666;
  background: #999;
  border-radius: 10px 10px 0 0;
  font-size: 14px;
  color: #fff;
}
.ris_dept_modal_head span{
  display: inline-block;
  float: right;
  padding: 0 20px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}
/*模态里面的内容*/
.ris_dept_modal_tab{
  width: 85%;
  margin: 0 auto;
  line-height: 50px;
  margin-top: 20px;
}
.ris_dept_modal_tab tr td:nth-child(1){width: 20%}
.ris_dept_modal_tab tr td:nth-child(2){width: 80%}
.ris_dept_modal_tab tr td input,.ris_dept_modal_tab tr td select{
  width: 100%;
  height: 28px;
  border: 1px solid #666;
  border-radius: 3px;
  box-sizing: border-box;
}
.ris_dept_modal_tab tr td textarea{
  width: 100%;
  height: 60px;
  border: 1px solid #666;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 5px;
  margin-top: 10px;
}
.ris_dept_modal_btn{
  text-align: right;
}
.ris_dept_modal_btn button{
  width: 80px;
  height: 36px;
  background-color: #215c84;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  margin-right: 50px;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}
.ris_dept_modal_btn button:hover{
  background-color: #1a4161;
}
  .ris_dept_modal>div{
    height: 380px;

  }

</style>
